<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="txt" type="text" value="">
    <input id="btn" type="button" value="四位">
    <input id="btns" type="button" value="确定">
    <script>
        var $random = document.getElementsByTagName('input');
        // text
        $random[0].style.width = '100px';
        $random[0].style.height = '15px';
        //button
        $random[1].style.background = 'cyan';
        $random[1].style.border = 'none';
        $random[1].style.height = '20px';

        btn.onclick = function () {
            // 生成随机4个 0--9  的验证码
            btn.value = ''+ randomNum(0, 9) + randomNum(0, 9) + randomNum(0, 9) + randomNum(0, 9)
            // 获取验证码的值
            btns.onclick = function () {
                if(txt.value === btn.value) {
                    alert('验证码正确')
                }else{
                    alert('请再次确定验证码')
                }
            }
        }
        // 先判断两个参数的大小
        function randomNum(n, m){
            var max, min;
            max = n > m ? n : m;
            min = n < m ? n : m;

            return parseInt(Math.random() * (max - min + 1) + min);
        }
        randomNum(0,9)
    </script>
</body>

</html>